<template>
    <div class="content">
        <u--form labelPosition="left" labelWidth="80" :model="form" ref="uForm">
            <u-form-item label="昵称" prop="form.nickname" borderBottom rightIcon="arrow-right">
                <input
                    v-model="form.nickname"
                    type="nickname"
                    @blur="onBlur"
                    placeholder="请输入昵称"
                />
            </u-form-item>
        </u--form>
        <div class="footer-bar">
            <button class="submit-btn" @click="submit">提交</button>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: 'nickname',
    data() {
        return {
            form: {
                nickname: '',
            },
        };
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    onLoad() {
        if (this.userInfo && this.userInfo.nickname) {
            this.form.nickname = this.userInfo.nickname;
        }
    },
    methods: {
        onBlur(e) {
            this.form.nickname = e.detail.value;
        },
        submit() {
            if (!this.form.nickname) {
                uni.showToast({
                    title: '请填写昵称',
                    icon: 'none',
                });
                return false;
            }
            this.$Api.member.user.updateNickname(this.form).then(() => {
                uni.showToast({
                    title: '修改成功',
                });
                this.$store.dispatch('getUserInfo');
                uni.navigateBack();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 30rpx;
    box-sizing: border-box;
    .footer-bar {
        margin-top: 30rpx;
        .submit-btn {
            width: 690rpx;
            height: 88rpx;
            line-height: 88rpx;
            color: #fff;
            font-size: 32rpx;
            margin-top: 140rpx;
            background: #5428ec;
        }
    }
}
</style>
